<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="300px" class="demo-ruleForm">
  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">


        <el-form-item label="楼盘名称" prop="name" style="width: 1000px">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="楼盘地址" prop="address" style="width: 1000px">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>

        <el-form-item label="城市地区" prop="county">
          <el-select v-model="ruleForm.province" placeholder="省" @change="city">
            <el-option :label="item.regionName" :value="item.regionId" v-for="item in provinceList"></el-option>
          </el-select>
          <el-select v-model="ruleForm.city" placeholder="市" @change="county">
            <el-option :label="item.regionName" :value="item.regionId" v-for="item in cityList"></el-option>
          </el-select>
          <el-select v-model="ruleForm.county" placeholder="县" @change="sq">
            <el-option :label="item.regionName" :value="item.regionId" v-for="item in countyList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商圈">
          <el-checkbox-group v-model="ruleForm.commercialAreaList">
            <el-checkbox :label="item.id" v-for="item in commercialAreaList">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="地铁">
          <el-checkbox-group v-model="ruleForm.subwayList1">
            <el-checkbox :label="item.id" v-for="item in subwayList">{{item.subway}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="建筑面积" style="width: 1000px">
          <el-col :span="20">
            <el-input v-model="ruleForm.proportion" placeholder="建筑面积"></el-input>
          </el-col>
          <el-col :span="4">
            <span>平方米</span>
          </el-col>
        </el-form-item>

        <el-form-item label="建筑类型">
          <el-checkbox-group v-model="ruleForm.buildingList">
            <el-checkbox :label="item.id" :value="item.id"  v-for="item in buildingTypeList">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="社区类型">
          <el-select v-model="ruleForm.communityType" placeholder="请选择社区类型">
            <el-option :label="item.name" :value="item.id"  v-for="item in regionList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物业类型">
          <el-checkbox-group v-model="ruleForm.communityList">
            <el-checkbox :label="item.id" :value="item.id"  v-for="item in communityTypeList">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="楼盘特色">
          <el-checkbox-group v-model="ruleForm.propertyFeaturesList">
            <el-checkbox :label="item.id"  v-for="item in propertyFeaturesList">{{item.premisesProperty}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="容积率" style="width: 1000px">
          <el-col :span="20">
          <el-input v-model="ruleForm.grossPlotRatio" placeholder="容积率"></el-input>
          </el-col>
          <el-col :span="4">
          <span>平方米</span>
          </el-col>
        </el-form-item>
        <el-form-item label="得房率" style="width: 1000px">
          <el-col :span="20">
            <el-input v-model="ruleForm.efficiency" placeholder="得房率"></el-input>
          </el-col>
          <el-col :span="4">
            <span>%</span>
          </el-col>
        </el-form-item>
        <el-form-item label="绿化率" style="width: 1000px">
          <el-col :span="20">
            <el-input v-model="ruleForm.greenCoverage" placeholder="绿化率"></el-input>
          </el-col>
          <el-col :span="4">
            <span>%</span>
          </el-col>
        </el-form-item>
        <el-form-item label="楼栋数" style="width: 1000px">
          <el-col :span="20">
            <el-input v-model="ruleForm.buildingCount" placeholder="楼栋数"></el-input>
          </el-col>
          <el-col :span="4">
            <span>栋</span>
          </el-col>
        </el-form-item>
        <el-form-item label="开发商" style="width: 1000px">
          <el-input v-model="ruleForm.developer" placeholder="开发商"></el-input>
        </el-form-item>
        <el-form-item label="物业管理公司" style="width: 1000px">
          <el-input v-model="ruleForm.estate" placeholder="物业管理公司"></el-input>
        </el-form-item>

        <el-form-item label="楼盘简介" style="width: 1000px">
          <el-input type="textarea" v-model="ruleForm.introduce" placeholder="楼盘简介"></el-input>
        </el-form-item>
        <el-form-item label="周边配套">
          <el-col :span="24" class="warp-main">
            <el-button type="warning" @click="add1">添加</el-button>
            <el-button type="warning" @click="del1">删除</el-button>
            <el-form :inline="true" class="demo-form-inline" v-for="(item, index) in ruleForm.peripheralFacilities" :key="index" >
              <el-form-item>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox value="index" :label="index"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="标题">
                <el-input v-model="item.title" placeholder="请输入标题"></el-input>
              </el-form-item>
              <el-form-item label="内容">
                <el-input v-model="item.content" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-form-item>
        <el-form-item label="交通情况">
          <el-col :span="24" class="warp-main">
            <el-button type="warning" @click="add">添加</el-button>
            <el-button type="warning" @click="del()">删除</el-button>
            <el-form :inline="true" class="demo-form-inline" v-for="(item, index) in ruleForm.trafficCondition" :key="index" >
              <el-form-item>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox value="index" :label="index"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="标题">
                <el-input v-model="item.title" placeholder="请输入标题"></el-input>
              </el-form-item>
              <el-form-item label="内容">
                <el-input v-model="item.content" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-form-item>
    </el-tab-pane>
    <el-tab-pane label="相册管理" name="second">
      <el-row>
        <el-button type="warning">转移至</el-button>
        <el-button type="warning">删除</el-button>
      </el-row>
      <el-row>
        <h1>户型图:</h1>
        <el-upload
          ref="upload1"
          :limit="5"
          accept=".jpg, .png"
          :action="upload1.url"
          :headers="upload1.headers"
          :file-list="upload1.fileList"
          :on-progress="handleFileUploadProgress1"
          :on-success="handleFileSuccess1"
          :on-remove="handleRemove1"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="warning">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="warning" :loading="upload1.isUploading" @click="submitUpload1">上传图片</el-button>
          <img :src="item.url" class="avatar" width="50px" height="50px" v-for="item in ruleForm.hxtList">
        </el-upload>
      </el-row>
      <el-row>
        <h1>外景图:</h1>
        <el-upload
          ref="upload2"
          :limit="5"
          accept=".jpg, .png"
          :action="upload2.url"
          :headers="upload2.headers"
          :file-list="upload2.fileList"
          :on-progress="handleFileUploadProgress2"
          :on-success="handleFileSuccess2"
          :on-remove="handleRemove2"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="warning">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="warning" :loading="upload2.isUploading" @click="submitUpload2">上传图片</el-button>
          <img :src="item.url" class="avatar" width="50px" height="50px" v-for="item in ruleForm.wjtList">
        </el-upload>
      </el-row>
      <el-row>
        <h1>施工图:</h1>
        <el-upload
          ref="upload3"
          :limit="5"
          accept=".jpg, .png"
          :action="upload3.url"
          :headers="upload3.headers"
          :file-list="upload3.fileList"
          :on-progress="handleFileUploadProgress3"
          :on-success="handleFileSuccess3"
          :on-remove="handleRemove3"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="warning">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="warning" :loading="upload3.isUploading" @click="submitUpload3">上传图片</el-button>
          <img :src="item.url" class="avatar" width="50px" height="50px" v-for="item in ruleForm.sgtList">
        </el-upload>
      </el-row>
      <el-row>
        <h1>效果图:</h1>
        <el-upload
          ref="upload4"
          :limit="5"
          accept=".jpg, .png"
          :action="upload4.url"
          :headers="upload4.headers"
          :file-list="upload4.fileList"
          :on-progress="handleFileUploadProgress4"
          :on-success="handleFileSuccess4"
          :on-remove="handleRemove4"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="warning">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="warning" :loading="upload4.isUploading" @click="submitUpload4">上传图片</el-button>
          <img :src="item.url" class="avatar" width="50px" height="50px" v-for="item in  ruleForm.xgtList">
        </el-upload>
      </el-row>

      <el-row>
        <h1>首页图:</h1>
        <el-upload
          ref="upload5"
          :limit="5"
          accept=".jpg, .png"
          :action="upload5.url"
          :headers="upload5.headers"
          :file-list="upload5.fileList"
          :on-progress="handleFileUploadProgress5"
          :on-success="handleFileSuccess5"
          :on-remove="handleRemove5"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="warning">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="warning" :loading="upload5.isUploading" @click="submitUpload5">上传图片</el-button>
          <img :src="item.url" class="avatar" width="50px" height="50px" v-for="item in ruleForm.sytList">
        </el-upload>
      </el-row>
    </el-tab-pane>
     </el-tabs>
    <el-form-item>
      <el-button type="warning" @click="submitForm('ruleForm')">提交</el-button>
    </el-form-item>
  </el-form>

</template>

<script>

import {shangquan,ditie,jianzhuleixing,shequleixing,loupantese,wuyeleixing,chengshi,save} from "@/api/building/build/building";
import { getToken } from "@/utils/auth";

export default {
  name: "index",
  data() {
    return {
      ruleForm: {
        name: '',
        address: '',
        province: [],
        city: [],
        county: [],
        subwayList1: [],
        proportion: '',
        buildingList:[],
        communityType:[],
        communityList:[],
        commercialAreaList:[],
        propertyFeaturesList:[],
        grossPlotRatio:'',
        efficiency:'',
        greenCoverage:'',
        buildingCount:'',
        developer:'',
        estate:'',
        introduce:'',
        trafficCondition:[{
          type:1,
        }],
        peripheralFacilities:[{
          type:0,
        }],
        hxtList:[],//户型图
        wjtList:[],//外景图
        sgtList:[],//施工图
        xgtList:[],//效果图
        sytList:[],//首页图
      },
      imgutl:null,
      buildingTypeList:[],
      regionList:[],
      communityTypeList:[],
      provinceList:[],
      cityList:[],
      countyList:[],
      propertyFeaturesList:[],
      subwayList:[],
      commercialAreaList:[],
      checkedCities: [],
      trafficCondition:[],
      peripheralFacilities:[],
      rules: {
        name: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        address: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        county: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
      },
      activeName: 'first',
      formArr: [
        {
          value: ''
        }
      ],
      // 上传参数
      upload1: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传的文件列表
        fileList: []
      },
      // 上传参数
      upload2: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传的文件列表
        fileList: []
      },
      // 上传参数
      upload3: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传的文件列表
        fileList: []
      },
      // 上传参数
      upload4: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传的文件列表
        fileList: []
      },
      // 上传参数
      upload5: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传的文件列表
        fileList: []
      },
    };
  },
  methods: {
    //首页图删除
    handleRemove5(file, fileList) {
      this.ruleForm.sytList.some((pic,i)=>{
        if (pic.name == file.name){
          this.ruleForm.sytList.splice(i,1)
        }
      })
    },
    //效果图删除
    handleRemove4(file, fileList) {
      this.ruleForm.xgtList.some((pic,i)=>{
        if (pic.name == file.name){
          this.ruleForm.xgtList.splice(i,1)
        }
      })
    },
    //施工图删除
    handleRemove3(file, fileList) {
      this.ruleForm.sgtList.some((pic,i)=>{
        if (pic.name == file.name){
          this.ruleForm.sgtList.splice(i,1)
        }
      })
    },
    //外景图删除
    handleRemove2(file, fileList) {
      this.ruleForm.wjtList.some((pic,i)=>{
        if (pic.name == file.name){
          this.ruleForm.wjtList.splice(i,1)
        }
      })
    },
    //户型图删除
    handleRemove1(file, fileList) {
      this.ruleForm.hxtList.some((pic,i)=>{
        if (pic.name == file.name){
          this.ruleForm.hxtList.splice(i,1)
        }
      })
    },
    // 首页图提交处理
    submitUpload5() {
      this.$refs.upload5.submit();
    },
    // 效果图提交处理
    submitUpload4() {
      this.$refs.upload4.submit();
    },
    //施工提交处理
    submitUpload3() {
      this.$refs.upload3.submit();
    },
    //外景图提交处理
    submitUpload2() {
      this.$refs.upload2.submit();
    },
    //户型图提交处理
    submitUpload1() {
      this.$refs.upload1.submit();
    },
   // 首页图上传中处理
    handleFileUploadProgress5(event, file, fileList) {
      this.upload5.isUploading = true;
    },
    // 效果图上传中处理
    handleFileUploadProgress4(event, file, fileList) {
      this.upload4.isUploading = true;
    },
    //施工图上传中处理
    handleFileUploadProgress3(event, file, fileList) {
      this.upload3.isUploading = true;
    },
    //外景图上传中处理
    handleFileUploadProgress2(event, file, fileList) {
      this.upload2.isUploading = true;
    },
    //户型图上传中处理
    handleFileUploadProgress1(event, file, fileList) {
      this.upload1.isUploading = true;
    },

    // 首页图文件上传成功处理
    handleFileSuccess5(response, file, fileList) {
      this.upload5.isUploading = false;
      //this.ruleForm.filePath = response.data.url;
      this.upload5.fileList.push({name: response.data.name,url:response.data.url});
      this.ruleForm.sytList=this.upload5.fileList;
    },
    // 效果图文件上传成功处理
    handleFileSuccess4(response, file, fileList) {
      this.upload4.isUploading = false;
      //this.ruleForm.filePath = response.data.url;
      this.upload4.fileList.push({name: response.data.name,url:response.data.url});
      this.ruleForm.xgtList=this.upload4.fileList;
    },
    //施工图上传成功处理
    handleFileSuccess3(response, file, fileList) {
      this.upload3.isUploading = false;
      //this.ruleForm.filePath = response.data.url;
      this.upload3.fileList.push({name: response.data.name,url:response.data.url});
      this.ruleForm.sgtList=this.upload3.fileList;
    },
    //外景图上传成功处理
    handleFileSuccess2(response, file, fileList) {
      this.upload2.isUploading = false;
      //this.ruleForm.filePath = response.data.url;
      this.upload2.fileList.push({name: response.data.name,url:response.data.url});
      this.ruleForm.wjtList=this.upload2.fileList;
    },
    //户型图上传成功处理
    handleFileSuccess1(response, file, fileList) {
      this.upload1.isUploading = false;
      //this.ruleForm.filePath = response.data.url;
      this.upload1.fileList.push({name: response.data.name,url:response.data.url});
      this.ruleForm.hxtList=this.upload1.fileList;
    },


    handleCheckedCitiesChange(row) {
      let idss = row.map(row=>{
        return row;
      });
      this.checkedCities=idss;
    },
    add() {
      this.ruleForm.trafficCondition.push({})
    },
    del() {
      if(this.checkedCities.length!=0){
        console.log(this.checkedCities.length,"======================")
        for (let i = 0; i < this.checkedCities.length; i++) {
          this.ruleForm.trafficCondition.splice(this.checkedCities[i], 1)
        }
      }
      this.$message.error("请选择要删除的数据")
    },
    add1() {
      this.ruleForm.peripheralFacilities.push({})
    },
    del1() {
      if(this.checkedCities.length!=0){
        console.log(this.checkedCities.length,"======================")
        for (let i = 0; i < this.checkedCities.length; i++) {
          this.ruleForm.peripheralFacilities.splice(this.checkedCities[i], 1)
        }
      }
      this.$message.error("请选择要删除的数据")
    },
    /*省*/
    province(){
      let parentId = 1;
      chengshi(parentId).then(res=>{
      //  console.log("省",res)
        this.provinceList=res;
      })
    },
    /*市*/
    city(){
      let parentId = this.ruleForm.province;
      chengshi(parentId).then(res=>{
       // console.log("市",res)
        this.cityList=res;
      })
      /*地铁*/
      ditie(parentId).then(res=>{
        console.log("地铁",res)
        this.subwayList=res;
      })
    },
    /*县*/
    county(){
      var parentId = this.ruleForm.city;
      chengshi(parentId).then(res=>{
      //  console.log("县",res)
        this.countyList=res;
      })
    },
    sq(){
      var parentId = this.ruleForm.county;
      /*商圈*/
      shangquan(parentId).then(res=>{
        console.log("商圈",res)
        this.commercialAreaList=res;
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          save(this.ruleForm).then(res=>{
            this.$message.success("添加成功")
            this.$router.push({path: '/building/building'})
          })
        } else {
          this.$alert('楼盘地址不能为空', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `添加失败`
              });
            }
          });
          return;
        }
      });
    },
  },
  created() {
    /*建筑类型*/
    jianzhuleixing().then(res=>{
     // console.log("建筑类型",res)
      this.buildingTypeList=res;
    })
    /*社区类型*/
    shequleixing().then(res=>{
    //  console.log("社区类型",res)
      this.regionList=res;
    })
    /*楼盘特色*/
    loupantese().then(res=>{
     // console.log("楼盘特色",res)
      this.propertyFeaturesList=res;
    })
    /*物业类型*/
    wuyeleixing().then(res=>{
     // console.log("物业类型",res)
      this.communityTypeList=res;
    })
    this.province()
    this.ruleForm.name = this.$route.query.name;
  }
}
</script>

<style scoped>

</style>
